<template>
  <view
    class="container bg-gradient-to-b from-[#faf8f5] to-[#f5f2ee] min-h-screen"
  >
    <!-- 顶部导航 -->
    <!-- <NavigationBar title="项目" /> -->

    <!-- 我的项目 -->
    <view class="px-4 pt-[42rpx]">
      <view class="text-[34rpx] text-[#252523] font-bold mb-[20rpx]"
        >我的项目</view
      >
      <!-- 项目卡片 -->
      <template v-if="myProjects.length > 0">
        <view
          v-for="(item, index) in myProjects"
          :key="index"
          class="bg-white/90 backdrop-blur-sm rounded-lg overflow-hidden shadow-md"
          :class="{ 'mb-3': index !== myProjects.length - 1 }"
        >
          <view class="flex p-3">
            <image
              :src="upload_url + item.projectImage"
              class="w-[180rpx] h-[180rpx] rounded"
              mode="aspectFill"
            ></image>
            <view class="flex-1 ml-3 flex flex-col justify-between">
              <view class="text-base text-[#252523]">{{
                item.projectName
              }}</view>
              <view class="flex text-sm text-gray-500 my-[15rpx]">
                <text>共{{ item.totalSessions }}次</text>
                <text class="mx-4">|</text>
                <text
                  >剩余
                  <text class="text-[#FF5040]">{{
                    item.remainingSessions
                  }}</text>
                  次</text
                >
              </view>
              <text
                class="btnLinearGradient w-[300rpx] h-[60rpx] text-white rounded-full px-5 py-1 text-center"
                @click="handleReservation(item)"
              >
                立即预约
              </text>
            </view>
          </view>
        </view>
      </template>
      <!-- 空状态 -->
      <template v-else>
        <u-empty
          mode="list"
          text="暂无项目数据"
          textColor="#999"
          textSize="28rpx"
          iconSize="120rpx"
          marginTop="80rpx"
        ></u-empty>
      </template>
    </view>

    <!-- 爆款项目推荐 -->
    <view class="px-4 pt-[60rpx]">
      <view class="text-[34rpx] text-[#252523] font-bold mb-[20rpx]"
        >爆款项目推荐</view
      >

      <!-- 推荐项目列表 -->
      <template v-if="recommendedProjects.length > 0">
        <view
          v-for="(item, index) in recommendedProjects"
          :key="index"
          class="bg-white/90 backdrop-blur-sm rounded-lg p-1 border-2 border-[#af6c31] shadow-md"
          :class="{ 'mb-3': index !== recommendedProjects.length - 1 }"
        >
          <view class="flex items-center">
            <image
              :src="upload_url + item.coverImgUrl"
              class="w-[235rpx] h-[189rpx] rounded"
              mode="aspectFill"
            ></image>
            <view class="flex-1 ml-3 flex flex-col">
              <view
                class="text-[#252523] text-base mt-[24rpx] mb-[40rpx] font-bold"
                >{{ item.name }}</view
              >
              <view class="flex items-center justify-between">
                <view class="text-[#252523] text-[50rpx]"
                  >优惠价: ¥{{ item.price }}</view
                >
                <text
                  class="btnLinearGradient text-white rounded-full px-4 py-1 ml-[18rpx]"
                  @click="handleGrab(item)"
                >
                  马上抢
                </text>
              </view>
            </view>
          </view>
        </view>
      </template>
      <!-- 空状态 -->
      <template v-else>
        <u-empty
          mode="list"
          text="暂无推荐项目"
          textColor="#999"
          textSize="28rpx"
          iconSize="120rpx"
          marginTop="80rpx"
        ></u-empty>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
import NavigationBar from "@/components/navigationBar/index.vue";

import { ref } from "vue";
import { getMyProjectAppointments, getHotProject } from "@/api/my";
import type { recordResponse, HotProjectResponseData } from "@/api/my";
import { onShow } from "@dcloudio/uni-app";
import { upload_url } from "@/utils/config";
// 定义类型接口
interface MyProject {
  name: string;
  image: string;
  total: number;
  remaining: number;
}

// 定义响应式数据
const myProjects = ref<recordResponse[]>([]);

// 爆款项目列表
const recommendedProjects = ref<HotProjectResponseData[]>([]);
const pageNumber = ref(1);
const pageSize = ref(10);
const handleGetMyProjectAppointments = () => {
  getMyProjectAppointments({
    pageNumber: pageNumber.value,
    pageSize: pageSize.value,
    type: 1,
  }).then((res) => {
    myProjects.value = res.data.records;
  });
};

// 爆款项目
const ProjectPage = ref({
  pageNumber: 1,
  pageSize: 10,
});
const handleGetHotProject = () => {
  getHotProject({
    pageNumber: ProjectPage.value.pageNumber,
    pageSize: ProjectPage.value.pageSize,
    type: 1,
  }).then((res) => {
    recommendedProjects.value = res.data.records;
  });
};

/**
 * 抢购
 * @param item 项目
 */
const handleGrab = (item: HotProjectResponseData) => {
  console.log(item, "item");
  // 跳转到详情
  uni.navigateTo({
    url: "/pages/home/goodsDetail?id=" + item.id,
  });
};

/**
 * 立即预约
 * @param item 项目
 */
const handleReservation = (item: recordResponse) => {
  console.log(item, "item");
  // 跳转到预约
  uni.navigateTo({
    url: "/pages/home/goodsReservation?id=" + item.projectId,
  });
};

// 方法定义
const handleBack = () => {
  // 这是微信小程序的
  // #ifdef MP-WEIXIN
  uni.navigateBack();
  // #endif
  // 这是支付宝小程序的
  // #ifdef MP-ALIPAY
  uni.navigateBack();
  // #endif
  //   H5
  // #ifdef H5
  history.back(); //back() 方法可加载历史列表中的前一个 URL（如果存在）。
  // #endif
};
onShow(async () => {
  await handleGetMyProjectAppointments();
  await handleGetHotProject();
});
</script>

<style scoped lang="scss">
.btnLinearGradient:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 8rpx rgba(175, 108, 49, 0.2);
}

/* 增强视觉层次 */
.container {
  position: relative;
}

/* 卡片悬停效果 */
.bg-white\/90 {
  transition: all 0.3s ease;
}

.bg-white\/90:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 25rpx rgba(175, 108, 49, 0.15);
}
</style>
